<div class="comments-header">
    <form [formGroup]="commentForm.form" (ngSubmit)="comment()">
        <sqx-autocomplete
            autoFocus="true"
            autoSelectFirst="false"
            displayProperty="contributorEmail"
            (editorBlur)="onBlur()"
            (editorKeyPress)="onKeyPress($event)"
            formControlName="text"
            [itemsSource]="contributorsDataSource"
            placeholder="{{ 'comments.create' | sqxTranslate }}"
            startCharacter="@"
            textArea="true">
            <ng-template let-contributor="$implicit">
                <span class="autocomplete-user">
                    <img class="user-picture" [src]="contributor.contributorId | sqxUserPicture" />
                    <span class="user-name">{{ contributor.contributorName }}</span>
                </span>
            </ng-template>
        </sqx-autocomplete>
    </form>
</div>

<div class="comments-list" #scrollContainer>
    @for (comment of commentsItems | async; track comment.index) {
        <sqx-comment
            canAnswer="true"
            canEdit="true"
            canFollow="false"
            [commentItem]="comment"
            [comments]="commentsState"
            [contributors]="contributorsDataSource"
            [currentUrl]="router.url"
            [scrollContainer]="'.comments-list'"
            [userToken]="commentUser" />
    }
</div>
